<template>
  <!--  截图/上传  -->

  <el-form-item v-if="!getDataConfigValue('hidden')"
                v-show="isShow&& checkReply()"
                :label="showLabel ? getDataConfigValue('label') : ''"
                :prop="attrName">
    <!--  下拉框  -->
    <template v-if="R.equals('list', getDataConfigValue('type'))">
      <normal-select :dataForm="dataForm" ref="component"
                     :attr-name="attrName"
                     :createAble="getDataConfigValue('createAble')"
                     :selectMultiple="getDataConfigValue('selectMultiple')"
                     :placeholder="getDataConfigValue('placeholder')"
                     :list="getDataConfigValue('list')"
                     :disabled="getDataConfigValueByDisabled()"
                     :filterable="getDataConfigValue('filterable')"
                     :clearable="getDataConfigValue('clearable')"
                     :otherInfo="getDataConfigValue('otherInfo')"
                     :isNeedAdd="getDataConfigValue('isNeedAdd')"
                     :isNeedLook="getDataConfigValue('isNeedLook')"
                     :addNewItemFunc="getDataConfigValue('addNewItemFunc')"
                     :lookItemInfoFunc="getDataConfigValue('lookItemInfoFunc')"
                     :beforeSubmitFunc="getDataConfigValue('beforeSubmitFunc')"
                     :dataLoadedFunc="getDataConfigValue('dataLoadedFunc')"
                     :selectCallback="getDataConfigValue('selectCallback')"
      >
      </normal-select>
    </template>
    <!--  级联选择器  -->
    <template v-else-if="R.equals('cascader', getDataConfigValue('type'))">
      <normal-cascader :dataForm="dataForm" ref="component"
                       :attr-name="attrName"
                       :placeholder="getDataConfigValue('placeholder')"
                       :list="getDataConfigValue('list')"
                       :disabled="getDataConfigValue('disabled')"
                       :filterable="getDataConfigValue('filterable')"
                       :clearable="getDataConfigValue('clearable')"
                       :otherInfo="getDataConfigValue('otherInfo')"
                       :beforeSubmitFunc="getDataConfigValue('beforeSubmitFunc')"
                       :dataLoadedFunc="getDataConfigValue('dataLoadedFunc')"
                       :selectCallback="getDataConfigValue('selectCallback')"
      >
      </normal-cascader>
    </template>
    <!--  数字输入框  -->
    <template v-else-if="R.equals('number', getDataConfigValue('type'))">
      <normal-number :dataForm="dataForm" ref="component"
                     :attr-name="attrName"
                     :placeholder="getDataConfigValue('placeholder')"
                     :max="getDataConfigValue('max')"
                     :min="getDataConfigValue('min')"
                     :disabled="getDataConfigValueByDisabled()"
                     :beforeSubmitFunc="getDataConfigValue('beforeSubmitFunc')"
                     :dataLoadedFunc="getDataConfigValue('dataLoadedFunc')"
                     :changedCallback="getDataConfigValue('selectCallback')"
      >
      </normal-number>
    </template>
    <!--  日期时间选择框  -->
    <template v-else-if="R.equals('date', getDataConfigValue('type'))">
      <normal-date :dataForm="dataForm" ref="component"
                   :attr-name="attrName"
                   :placeholder="getDataConfigValue('placeholder')"
                   :clearable="getDataConfigValue('clearable')"
                   :dateType="getDataConfigValue('dateType')"
                   :dateFormat="getDataConfigValue('dateFormat')"
                   :beforeSubmitFunc="getDataConfigValue('beforeSubmitFunc')"
                   :dataLoadedFunc="getDataConfigValue('dataLoadedFunc')"
                   :changedCallback="getDataConfigValue('changedCallback')"
                   :valueFormat="getDataConfigValue('valueFormat')"
      ></normal-date>
    </template>
    <!--  图片/文件上传  -->
    <template v-else-if="R.equals('uploadImage', getDataConfigValue('type'))">
      <upload-image :dataForm="dataForm" ref="component"
                    :attr-name="attrName"
                    :imageType="getDataConfigValue('imageType')"
                    :beforeSubmitFunc="getDataConfigValue('beforeSubmitFunc')"
                    :dataLoadedFunc="getDataConfigValue('dataLoadedFunc')"
      ></upload-image>
    </template>

    <template v-else-if="R.equals('uploadScreenshot', getDataConfigValue('type'))">
      <upload-screenshot :dataForm="dataForm" ref="component"
                    :attr-name="attrName"
                    :beforeSubmitFunc="getDataConfigValue('beforeSubmitFunc')"
                    :dataLoadedFunc="getDataConfigValue('dataLoadedFunc')"
      ></upload-screenshot>
    </template>
    <!--  单选框  -->
    <template v-else-if="R.equals('radio', getDataConfigValue('type'))">
      <normal-radio :dataForm="dataForm" ref="component"
                    :attr-name="attrName"
                    :disabled="getDataConfigValueByDisabled()"
                    :radioList="getDataConfigValue('radioList')"
                    :radioBorder="getDataConfigValue('radioBorder')"
                    :beforeSubmitFunc="getDataConfigValue('beforeSubmitFunc')"
                    :dataLoadedFunc="getDataConfigValue('dataLoadedFunc')"
                    :changedCallback="getDataConfigValue('changedCallback')"
      ></normal-radio>
    </template>
    <!--  选择器  -->
    <template v-else-if="R.equals('switch', getDataConfigValue('type'))">
      <normal-switch :dataForm="dataForm" ref="component"
                     :attr-name="attrName"
                     :activeColor="getDataConfigValue('activeColor')"
                     :inactiveColor="getDataConfigValue('inactiveColor')"
                     :activeValue="getDataConfigValue('activeValue')"
                     :inactiveValue="getDataConfigValue('inactiveValue')"
                     :beforeSubmitFunc="getDataConfigValue('beforeSubmitFunc')"
                     :dataLoadedFunc="getDataConfigValue('dataLoadedFunc')"
      >
      </normal-switch>
    </template>
    <!--  复选框  -->
    <template v-else-if="R.equals('checkboxGroup', getDataConfigValue('type'))">
      <checkbox-group :dataForm="dataForm" ref="component"
                      :attr-name="attrName"
                      :checkList="getDataConfigValue('checkList')"
                      :border="getDataConfigValue('border')"
                      :labelAttr="getDataConfigValue('labelAttr')"
                      :textAttr="getDataConfigValue('textAttr')"
                      :beforeSubmitFunc="getDataConfigValue('beforeSubmitFunc')"
                      :dataLoadedFunc="getDataConfigValue('dataLoadedFunc')"
      >
      </checkbox-group>
    </template>
    <!--  树  -->
    <template v-else-if="R.equals('tree', getDataConfigValue('type'))">
      <normal-tree :dataForm="dataForm" ref="component"
                   :attr-name="attrName"
                   :treeItemList="getDataConfigValue('treeItemList')"
                   :treeLabelAttr="getDataConfigValue('treeLabelAttr')"
                   :treeChildrenAttr="getDataConfigValue('treeChildrenAttr')"
                   :nodeKey="getDataConfigValue('nodeKey')"
                   :defaultExpandAll="getDataConfigValue('defaultExpandAll')"
                   :beforeSubmitFunc="getDataConfigValue('beforeSubmitFunc')"
                   :dataLoadedFunc="getDataConfigValue('dataLoadedFunc')"
      ></normal-tree>
    </template>
    <!--  树形下拉选择控件  -->
    <template v-else-if="R.equals('treeSelect', getDataConfigValue('type'))">
      <normal-tree-select :dataForm="dataForm" ref="component"
                          :attr-name="attrName"
                          :placeholder="getDataConfigValue('placeholder')"
                          :treeData="getDataConfigValue('treeData')"
                          :selectCallback="getDataConfigValue('selectCallback')"
                          :clearable="getDataConfigValue('clearable')"
                          :beforeSubmitFunc="getDataConfigValue('beforeSubmitFunc')"
                          :dataLoadedFunc="getDataConfigValue('dataLoadedFunc')"
      ></normal-tree-select>
    </template>
    <!--  自动完成输入框  -->
    <template v-else-if="R.equals('autoComplete', getDataConfigValue('type'))">
      <auto-complete :dataForm="dataForm" ref="component"
                     :attr-name="attrName"
                     :placeholder="getDataConfigValue('placeholder')"
                     :querySearchApiName="getDataConfigValue('querySearchApiName')"
      >
      </auto-complete>
    </template>
    <!--  执行函数  -->
    <template v-else-if="R.equals('func', getDataConfigValue('type'))">
      <normal-func :dataForm="dataForm" ref="component"
                   :attr-name="attrName"
                   :dataFunc="getDataConfigValue('dataFunc')"
      >
      </normal-func>
    </template>
    <!--  按钮  -->
    <template v-else-if="R.equals('button', getDataConfigValue('type'))">
      <normal-button :dataForm="dataForm" ref="component"
                     :attr-name="attrName"
                     :beforeSubmitFunc="getDataConfigValue('beforeSubmitFunc')"
                     :dataLoadedFunc="getDataConfigValue('dataLoadedFunc')"
                     :btnLabel="getDataConfigValue('btnLabel')"
                     :clickHandler="getDataConfigValue('clickHandler')"
      >
      </normal-button>
    </template>
    <!--  表格  -->
    <template v-else-if="R.equals('table', getDataConfigValue('type'))">
      <normal-table :dataForm="dataForm" ref="component"
                    :attr-name="attrName"
                    :beforeSubmitFunc="getDataConfigValue('beforeSubmitFunc')"
                    :dataLoadedFunc="getDataConfigValue('dataLoadedFunc')"
                    :column="getDataConfigValue('column')"
                    :operate="getDataConfigValue('operate')"
      >
      </normal-table>
    </template>
    <!--  列表和数字  -->
    <template v-else-if="R.equals('listAndNumber', getDataConfigValue('type'))">
      <normal-list-and-number :dataForm="dataForm" ref="component"
                              :attr-name="attrName"
                              :beforeSubmitFunc="getDataConfigValue('beforeSubmitFunc')"
                              :dataLoadedFunc="getDataConfigValue('dataLoadedFunc')"
                              :listPlaceholder="getDataConfigValue('listPlaceholder')"
                              :numberPlaceholder="getDataConfigValue('numberPlaceholder')"
                              :list="getDataConfigValue('list')"
                              :listName="getDataConfigValue('listName')"
                              :numberName="getDataConfigValue('numberName')"
                              :otherAttrs="getDataConfigValue('otherAttrs')"
      >
      </normal-list-and-number>
    </template>
    <!--  联级下拉框和数字输入框  -->
    <template v-else-if="R.equals('cascaderAndNumber', getDataConfigValue('type'))">
      <normal-cascader-and-number :dataForm="dataForm" ref="component"
                                  :attr-name="attrName"
                                  :beforeSubmitFunc="getDataConfigValue('beforeSubmitFunc')"
                                  :dataLoadedFunc="getDataConfigValue('dataLoadedFunc')"
                                  :listPlaceholder="getDataConfigValue('listPlaceholder')"
                                  :numberPlaceholder="getDataConfigValue('numberPlaceholder')"
                                  :list="getDataConfigValue('list')"
                                  :listName="getDataConfigValue('listName')"
                                  :numberName="getDataConfigValue('numberName')"
      >
      </normal-cascader-and-number>
    </template>
    <!--  列表和文本框  -->
    <template v-else-if="R.equals('listAndInput', getDataConfigValue('type'))">
      <normal-list-and-input :dataForm="dataForm" ref="component"
                             :attr-name="attrName"
                             :beforeSubmitFunc="getDataConfigValue('beforeSubmitFunc')"
                             :dataLoadedFunc="getDataConfigValue('dataLoadedFunc')"
                             :listPlaceholder="getDataConfigValue('listPlaceholder')"
                             :numberPlaceholder="getDataConfigValue('inputPlaceholder')"
                             :list="getDataConfigValue('list')"
                             :listName="getDataConfigValue('listName')"
                             :inputName="getDataConfigValue('inputName')"
      >
      </normal-list-and-input>
    </template>
    <!--  列表和数字和单选  -->
    <template v-else-if="R.equals('listAndNumberAndRadio', getDataConfigValue('type'))">
      <normal-list-and-number-and-radio :dataForm="dataForm" ref="component"
                              :attr-name="attrName"
                              :beforeSubmitFunc="getDataConfigValue('beforeSubmitFunc')"
                              :dataLoadedFunc="getDataConfigValue('dataLoadedFunc')"
                              :listPlaceholder="getDataConfigValue('listPlaceholder')"
                              :numberPlaceholder="getDataConfigValue('numberPlaceholder')"
                              :list="getDataConfigValue('list')"
                              :listName="getDataConfigValue('listName')"
                              :numberName="getDataConfigValue('numberName')"
                              :radioName="getDataConfigValue('radioName')"
                              :otherAttrs="getDataConfigValue('otherAttrs')"
                              :radioList="getDataConfigValue('radioList')"
                              :radioBorder="getDataConfigValue('radioBorder')"
      >
      </normal-list-and-number-and-radio>
    </template>
    <!--      NormalListAndListAndInputAndNumber-->
    <!--  产品配件采购-->
    <template v-else-if="R.equals('listAndListAndInputAndNumber', getDataConfigValue('type'))">
      <normal-list-and-list-and-input-and-number :dataForm="dataForm" ref="component"
                                        :attr-name="attrName"
                                        :beforeSubmitFunc="getDataConfigValue('beforeSubmitFunc')"
                                        :dataLoadedFunc="getDataConfigValue('dataLoadedFunc')"
                                        :listPlaceholder="getDataConfigValue('listPlaceholder')"
                                        :numberPlaceholder="getDataConfigValue('numberPlaceholder')"
                                        :inputNamePlaceholder="getDataConfigValue('inputNamePlaceholder')"
                                        :list="getDataConfigValue('list')"
                                        :listName="getDataConfigValue('listName')"
                                        :numberName="getDataConfigValue('numberName')"
                                        :radioName="getDataConfigValue('radioName')"
                                        :inputName="getDataConfigValue('inputName')"
                                        :otherAttrs="getDataConfigValue('otherAttrs')"
                                        :radioList="getDataConfigValue('radioList')"
                                        :radioBorder="getDataConfigValue('radioBorder')"
                                        :selectCallback="getDataConfigValue('selectCallback')"
      >
      </normal-list-and-list-and-input-and-number>
    </template>

    <!--  普通输入框  -->
    <template v-else>
      <normal-input :dataForm="dataForm" ref="component"
                    :attr-name="attrName"
                    :placeholder="getDataConfigValue('placeholder')"
                    :beforeSubmitFunc="getDataConfigValue('beforeSubmitFunc')"
                    :dataLoadedFunc="getDataConfigValue('dataLoadedFunc')"
                    :clearable="getDataConfigValue('clearable')"
                    :readonly="getDataConfigValue('readonly')"
                    :disabled="getDataConfigValue('disabled')"
                    :inputType="getDataConfigValue('inputType')"
                    :minRows="getDataConfigValue('minRows')"
                    :maxRows="getDataConfigValue('maxRows')"
      >
      </normal-input>
    </template>
  </el-form-item>
</template>

<script>
import NormalButton from './inputs/button'
import NormalInput from './inputs/input'
import NormalSelect from './inputs/select'
import NormalTreeSelect from './inputs/treeSelect'
import NormalTable from './inputs/table'
import NormalCascader from './inputs/cascader'
import NormalNumber from './inputs/number'
import NormalDate from './inputs/date'
import NormalRadio from './inputs/radio'
import NormalFunc from './inputs/func'
import UploadImage from './inputs/uploadImage'
import NormalListAndNumber from './inputs/listAndNumber'
import NormalListAndNumberAndRadio from './inputs/listAndNumberAndRadio'
import NormalListAndListAndInputAndNumber from './inputs/listAndListAndInputAndNumber'
import NormalListAndInput from './inputs/listAndInput'
import NormalSwitch from './inputs/switch'
import CheckboxGroup from './inputs/checkboxGroup'
import NormalTree from './inputs/tree'
import AutoComplete from './inputs/autocomplete'
import NormalCascaderAndNumber from './inputs/cascaderAndNumber'
import UploadScreenshot from './inputs/uploadScreenshot'

export default {
  name: 'item',
  components: {
    CheckboxGroup,
    NormalSwitch,
    UploadImage,
    UploadScreenshot,
    NormalCascaderAndNumber,
    NormalInput,
    NormalSelect,
    NormalNumber,
    NormalDate,
    NormalRadio,
    NormalTree,
    NormalFunc,
    NormalTable,
    NormalButton,
    NormalCascader,
    NormalListAndNumber,
    NormalListAndNumberAndRadio,
    NormalListAndListAndInputAndNumber,
    NormalListAndInput,
    NormalTreeSelect,
    AutoComplete
  },
  props: {
    /**
     * 数据表单
     */
    dataForm: {
      default: () => ({})
    },
    /**
     * 配置
     */
    config: {
      default: () => ({})
    },
    /**
     * 属性名称
     */
    attrName: {
      default: () => ''
    },
    /**
     * 是否显示标签
     */
    showLabel: {
      default: true
    },
    /**
     * 是否显示
     */
    isShow: {
      default: true
    }
  },
  data() {
    return {
      defaultConfig: {
        type: '', // 控件类型
        reply: '', // 依赖显示的属性名
        minRows: 2,
        maxRows: 5,
        inputType: 'text', // 输入框类型
        hidden: false, // 是否隐藏
        readonly: false, // 是否只读
        disabled: false,
        label: '', // 控件标签
        placeholder: '', // 输入框占位文本
        selectMultiple: false, // 下拉框是否启用多选
        list: [], // 下拉框数据
        filterable: true, // 下拉框是否支持过滤
        clearable: true, // 下拉框是否支持清空
        otherInfo: '', // 下拉框是否显示其他内容
        isNeedAdd: false, // 下拉框是否支持新建
        addNewItemFunc: null, // 下拉框新建按钮点击事件
        min: 0, // 数字输入框最小值
        max: 100000, // 数字输入框最大值
        dateType: 'date', // 时间日期组件类型
        dateFormat: 'yyyy 年 MM 月 dd 日', // 时间日期组件显示格式
        imageType: '', // 上传图片组件图片类型
        radioList: [], // 单选框组件选择集合 [{text: ... , label: ...}]
        radioBorder: false, // 单选框组件是否有边框
        activeColor: '#13ce66', // 选择器组件激活颜色
        inactiveColor: '#ff4949', // 选择器组件未激活颜色
        activeValue: 1, // 选择器组件激活值
        inactiveValue: 0, // 选择器组件未激活值,
        selectCallback: () => {
        }, // 选择器组件选中后的回调,
        checkList: '', // 复选框组件选择集合
        labelAttr: 'label', // 复选框组件实际值属性名
        textAttr: 'text', // 复选框组件显示值属性名
        treeItemList: [], // 树形控件数据列表
        treeLabelAttr: '', // 树形控件节点标签属性名称
        treeChildrenAttr: '', // 树形控件子节点属性名称
        nodeKey: '', // 树形控件节点ID属性名
        defaultExpandAll: false, // 树形控件是否默认展开
        beforeSubmitFunc: () => {
        },
        dataLoadedFunc: () => {
        }
      }
    }
  },
  methods: {
    /**
     * 检查依赖项是否存在或满足条件
     * @returns {boolean|*}
     */
    checkReply() {
      const replyAttrName = this.getDataConfigValue('reply')

      if (this.R.isNil(replyAttrName) || this.R.equals('', replyAttrName)) {
        return true
      }
      if (replyAttrName instanceof Function) {
        return replyAttrName()
      }
      return this.dataForm[replyAttrName]
    },
    /**
     * 从配置中获取具体的配置值
     * @param key 配置名称
     * @returns {*}
     */
      getDataConfigValue(key) {
      const value = this.R.path([key], this.config)

      if (this.R.isNil(value)) {
        return this.R.prop(key, this.defaultConfig)
      }
      return value
    },
    getDataConfigValueByDisabled(){
      const replyAttrName = this.getDataConfigValue('disabled')

      if (this.R.isNil(replyAttrName) || this.R.equals('', replyAttrName)) {
        return true
      }
      if (replyAttrName instanceof Function) {
        return replyAttrName()
      }
      return this.dataForm[replyAttrName]
    }
  }
}
</script>

<style scoped>

</style>
